import React from 'react';
import { Typography, Divider, Layout, Card, Steps } from 'antd';
import MarkdownCodeBlock from '@/components/MarkdownCodeBlock';
import projectImg from '@/images/docker/project.png';
// @ts-ignore
import DockerfileCode from '!!raw-loader!/Dockerfile';
// @ts-ignore
import DockerignoreCode from '!!raw-loader!/.dockerignore';
// @ts-ignore
import nginxConfCode from '!!raw-loader!/nginx.conf';
const { Title, Paragraph, Text } = Typography;
const { Content } = Layout;

const DeployManager: React.FC = () => {
  return (
    <Layout style={{ padding: '24px', background: '#f5f5f5' }}>
      <Content>
        <div className="deploy-manager" style={{ maxWidth: '900px', margin: '0 auto' }}>
          <Card>
            <Title level={2} style={{ textAlign: 'center', marginBottom: '24px' }}>
              使用 Docker 部署前端项目完整指南
            </Title>

            <Paragraph style={{ textAlign: 'center', fontSize: '16px' }}>
              本教程将指导您完成 Docker 的安装、配置和管理，帮助您更好地部署前端项目。
            </Paragraph>

            <Divider orientation="left">快速开始</Divider>

            <Steps
              direction="vertical"
              current={20}
              items={[
                {
                  title: '安装 Docker',
                  description: '使用 Homebrew 包管理器安装 Docker',
                  content: <MarkdownCodeBlock code="brew install --cask docker" />
                },
                {
                  title: '验证安装',
                  description: '确认 Docker 安装是否成功',
                  content: <MarkdownCodeBlock code="docker -v" />
                },
                {
                  title: '启动服务',
                  description: '启动 Docker 服务',
                  content: <MarkdownCodeBlock code="open /Applications/Docker.app" />
                },
                {
                  title: '检查状态',
                  description: '确认 Docker 服务运行状态',
                  content: <MarkdownCodeBlock code="docker info" />
                },
                {
                  title: '在前端项目中添加Dockerfile, .dockerignore, nginx.conf',
                  description: '在项目根目录下添加Dockerfile, .dockerignore, nginx.conf文件',
                  content: <img src={projectImg} alt="antDesignPro" />
                },
                {
                  title: '添加Dockerfile',
                  description: '在项目根目录下添加Dockerfile文件, 然后写上Dockerfile内容',
                  content: <MarkdownCodeBlock code={DockerfileCode} />
                },
                {
                  title: '添加.dockerignore',
                  description: '在项目根目录下添加.dockerignore文件, 然后写上.dockerignore内容',
                  content: <MarkdownCodeBlock code={DockerignoreCode} />
                },
                {
                  title: '添加nginx.conf',
                  description: '在项目根目录下添加nginx.conf文件, 然后写上nginx.conf内容',
                  content: <MarkdownCodeBlock code={nginxConfCode} />
                },
                {
                  title: '在package.json中添加build命令',
                  description: '在package.json中添加build命令, 然后写上build命令',
                  content: (
                    <MarkdownCodeBlock
                      code={`"build:docker": "docker build -t myapp-image .",
"run:docker": "docker run -d -p 8008:80 --name myapp-container myapp-image",
"docker": "npm run build:docker && npm run run:docker"`}
                    />
                  )
                },
                {
                  title: '运行docker',
                  description: '执行 `npm run docker` 后，等待项目构建完成。请注意，在打包 Docker 镜像时，需要确保能够访问 `https://auth.docker.io/token`。你可以通过在终端中运行 `curl https://auth.docker.io/token` 或 `curl https://www.google.com/` 来测试是否可以访问这些地址。如果无法访问，请前往你的代理设置中，找到类似 `export http_proxy=http://127.0.0.1:7890` 的命令，并将其复制到终端中执行。完成后，再次执行 `npm run docker`，这样 Docker 镜像就能成功打包了。',
                  content: <MarkdownCodeBlock code="npm run docker" />
                },
                {
                  title: '访问项目',
                  description: '访问项目',
                  content: <MarkdownCodeBlock code="http://localhost:8008" />
                }
              ].map(item => ({
                ...item,
                description: (
                  <div style={{ margin: '12px 0' }}>
                    <Text>{item.description}</Text>
                    <div style={{ marginTop: '8px' }}>{item.content}</div>
                  </div>
                )
              }))}
            />

            <Divider orientation="left">常用命令参考</Divider>

            <Card title="服务管理" style={{ marginBottom: '16px' }}>
              <Paragraph>
                <Text strong>启动服务：</Text>
                <MarkdownCodeBlock code="open /Applications/Docker.app" />
              </Paragraph>

              <Paragraph style={{ marginTop: '16px' }}>
                <Text strong>停止服务：</Text>
                <MarkdownCodeBlock code="osascript -e 'quit app &quot;Docker&quot;'" />
              </Paragraph>
            </Card>
          </Card>
        </div>
      </Content>
    </Layout>
  );
};

export default DeployManager;
